<template>
    <div class="ls-add-admin">

        <div class="ls-card p-20">
            <el-form :rules="rules" ref="form" :model="form" label-width="120px" size="small">
                <!-- 平台名称 -->
                <el-form-item label="平台名称" prop="platform_name">
                    <el-input class="ls-input" v-model="form.platform_name" placeholder="请输入平台名称">
                    </el-input>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item label="站点图标" prop="super_password">
                    <material-select :limit="1" v-model="form.platform_ico" />
                    <div class="flex">
                        <div class="muted xs m-r-16">建议尺寸：100*100像素的jpg，jpeg，png，gif格式</div>
                        <el-popover placement="right" width="200" trigger="hover">
                            <el-image :src="form.platform_ico_example" />
                            <el-button slot="reference" type="text">查看示例</el-button>
                        </el-popover>
                    </div>
                </el-form-item>
                <!-- 确认密码输入框 -->
                <el-form-item label="登录页图片" prop="super_password_confirm">
                    <material-select :limit="1" v-model="form.platform_login_image" />

                    <div class="flex">
                        <div class="muted xs m-r-16">建议尺寸：400*400像素的jpg，jpeg，png，gif格式</div>
                        <el-popover placement="right" width="200" trigger="hover">
                            <el-image :src="form.platform_login_image_example" />
                            <el-button slot="reference" type="text">查看示例</el-button>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%;">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { apiBaseConfig, apiBaseConfigEdit } from "@/api/setting";
import MaterialSelect from "@/components/material-select/index.vue";

@Component({
    components: {
        MaterialSelect,
    },
})
export default class Config extends Vue {
    /** S Data **/

    // 添加商城表单数据
    form: any = {
        platform_name: "", // 账号
        platform_ico: "", // 密码
        platform_login_image: "", // 确认密码
    };

    // 表单校验
    rules = {
        platform_name: [
            { required: true, message: "请输入平台名称", trigger: "blur" },
        ],
    };

    /** E Data **/

    /** S Methods **/
    // 点击表单提交
    onSubmit(formName: string) {
        // 验证表单格式是否正确
        const refs = this.$refs[formName] as HTMLFormElement;
        refs.validate((valid: boolean): any => {
            if (!valid) return;

            this.handleBaseConfigEdit();
        });
    }

    // 编辑平台信息
    async handleBaseConfigEdit(): Promise<void> {
        await apiBaseConfigEdit({ ...this.form });
        this.getBaseConfigFunc();
    }

    // 获取详情
    async getBaseConfigFunc(): Promise<void> {
        const res = await apiBaseConfig();
        for (var key in res) {
            this.$set(this.form, key, res[key]);
        }
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.getBaseConfigFunc();
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 380px;
    }
}
</style>